<template>
  <view class="container">
    <!-- 列表 -->
    <view class="list">
      <view class="item" v-for="(item, index) in list" :key="index">
		  <view class="item-t">
		  	
		  </view>
        <view class="item-b">
        <!-- 商品图片 -->
        	<image class="product-image" :src="item.image" mode="aspectFill"></image>
        	
        	<!-- 商品信息 -->
        	<view class="info">
        	  <view class="title">{{ item.title }}</view>
        	  <view class="time">{{ item.time }}</view>
        	  <view class="quantity">数量: {{ item.quantity }}</view>
        	  <view class="amount">金额: {{ item.amount }}元</view>
        	</view>
        	
        	<!-- 付款状态 -->
        	<view class="status">
        	  <text :class="['status-text', item.status === '待付款' ? 'unpaid' : 'paid']">
        	    {{ item.status }}
        	  </text>
        	</view>
        	
        	<!-- 操作按钮 -->
        	<view class="actions">
        	  <button v-if="item.status === '待付款'" class="btn" @click="handlePay(index)">去付款</button>
        	  <button v-else class="btn" @click="handleView(index)">查看详情</button>
        	</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 列表数据
      list: [
        {
          image: 'https://via.placeholder.com/150', // 商品图片
          title: '商品1',
          time: '2023-10-01 10:00',
          quantity: 2,
          amount: 100,
          status: '待付款'
        },
        {
          image: 'https://via.placeholder.com/150', // 商品图片
          title: '商品2',
          time: '2023-10-02 14:00',
          quantity: 1,
          amount: 50,
          status: '已付款'
        },
        {
          image: 'https://via.placeholder.com/150', // 商品图片
          title: '商品3',
          time: '2023-10-03 09:00',
          quantity: 3,
          amount: 150,
          status: '待付款'
        }
      ]
    };
  },
  methods: {
    // 去付款
    handlePay(index) {
      uni.showToast({
        title: `去付款：${this.list[index].title}`,
        icon: 'none'
      });
    },
    // 查看详情
    handleView(index) {
      uni.showToast({
        title: `查看详情：${this.list[index].title}`,
        icon: 'none'
      });
    }
  }
};
</script>

<style scoped>
	page{
  background-color: #f5f6f8;
		
	}
.container {
  padding: 20rpx;
}

.list {
  display: flex;
  flex-direction: column;
}

.item {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  .item-b{
  display: flex;
  align-items: center;
	  
  }
}

.product-image {
  width: 150rpx;
  height: 150rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.time,
.quantity,
.amount {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 5rpx;
}

.status {
  margin-right: 20rpx;
}

.status-text {
  font-size: 28rpx;
  padding: 5rpx 10rpx;
  border-radius: 5rpx;
}

.unpaid {
  background-color: #ffeb3b;
  color: #000;
}

.paid {
  background-color: #4caf50;
  color: #fff;
}

.actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.btn {
  font-size: 28rpx;
  padding: 10rpx 20rpx;
  border-radius: 5rpx;
  background-color: #007aff;
  color: #fff;
  margin-top: 10rpx;
}
</style>